<template>
  <div class="big">
    <el-row>
      <div class="card">
        <el-col :xs="24" :lg="16" :md="16" >
          <div class="car-left">
            <el-row>
              <div>
                <el-col :xs="4" :md="3" :lg="3">
                  <span class="card-img">
                    <img :src="userInfo.headerImg" alt="" />
                  </span>
                </el-col>
                <el-col :xs="20" :lg="12" :md="12">
                  <div class="text">
                    <h4>你好，{{userInfo.nick_name }}， 请开始您一天的工作吧！</h4>
                    <p class="tips-text">
                      <span>{{weatherInfo.city}}, {{weatherInfo.forecast[0].type}} | {{weatherInfo.forecast[0].low}} - {{weatherInfo.forecast[0].high}}，{{weatherInfo.ganmao}}</span>
                    </p>
                  </div>
                </el-col>
              </div>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :lg='8' :md="8">
          <div class="car-right">
            <el-row>
              <el-col :span="8"
                ><div class="car-item">
                  <span class="flow"><i class="el-icon-s-grid"></i></span>
                  <span>今日流量 </span>
                  <b>{{todayWebAccessCount}}</b>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="car-item">
                  <span class="user-number">
                    <i class="el-icon-s-custom"></i>
                  </span>
                  <span>总用户 </span>
                  <b>{{totalUserCount}}</b>
                </div></el-col
              >
              <el-col :span="8"
                ><div class="car-item">
                  <span class="feedback">
                    <i class="el-icon-s-flag"></i>
                  </span>
                  <span>总发布数</span>
                  <b> {{deployCount}} </b>
                </div></el-col
              >
            </el-row>
          </div>
        </el-col>
      </div>
    </el-row>
    <el-row>

    </el-row>
    <div class="shadow">
      <el-row :gutter="20">
        <el-col
          :span="4"
          v-for="(card, key) in toolCards"
          :key="key"
          @click.native="toTarget(card.name)"
          :xs="8"
        >
          <el-card shadow="hover" class="grid-content">
            <i :class="card.icon" :style="{ color: card.color }"></i>
            <p>{{ card.label }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-player">
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-player">
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'; // 引入axios
  import { mapGetters } from "vuex";
  import { getUserList } from "@/api/user";
  import { getDeployBuildList } from "@/api/deploy_build";
  import { getSysOperationRecordList,} from '@/api/sysOperationRecord';
export default {
  name: "Dashboard",
  data() {
    return {
      toolCards: [
        {
          label: "发布部署",
          icon: "el-icon el-icon-aim",
          name: "releaseIndex",
          color: "rgb(154, 147, 144)",
        },
        {
          label: "用户管理",
          icon: "el-icon el-icon-monitor",
          name: "user",
          color: "#ff9c6e",
        },
        {
          label: "角色管理",
          icon: "el-icon el-icon-setting",
          name: "authority",
          color: "#69c0ff",
        },
        {
          label: "菜单管理",
          icon: "el-icon el-icon-menu",
          name: "menu",
          color: "#b37feb",
        },
        {
          label: "关于我们",
          icon: "el-icon el-icon-user",
          name: "about",
          color: "#5cdbd3",
        },
      ],
      weatherInfo: {forecast: [{low:'', high: '', type: ''}]},  // 天气的基本信息
      totalUserCount: 0,
      todayWebAccessCount: 352,
      deployCount: 0,

    };
  },
  computed: {
    ...mapGetters("user", ["userInfo"]),
  },
  components: {

  },
  methods: {
    toTarget(name) {
      this.$router.push({ name });
    },
    getWebTodayAccessCount() {
      // 获取当天0时的时间
      let todayStartTimeStamp = (new Date(new Date().toLocaleDateString()).getTime() / 1000)
      // 获取当天23点59分59s时间
      let todayEndTimeStamp = (new Date(new Date().toLocaleDateString()).getTime() / 1000)  + (24 * 60 * 60 -1)
      getSysOperationRecordList({'page':1, 'pageSize':10000, 'start_time': todayStartTimeStamp, 'end_time': todayEndTimeStamp}).then(res => {
        this.todayWebAccessCount = res.data.list.length
      })
    }
  },
  created() {
    // 获取天气信息
    axios.get('http://wthrcdn.etouch.cn/weather_mini?citykey=101020100').then(res => {
      this.weatherInfo = res.data.data
      // console.log(this.weatherInfo)
    })

    // 获取用户列总数
    getUserList({'page':1, 'pageSize': 1}).then(res => {
      this.totalUserCount = res.data.total
    })

    // 获取总上线发布次数
    getDeployBuildList({'page':1, 'pageSize':1}).then(res => {
      if (res.code == 0 ) {
        this.deployCount = res.data.total
      } else {
        this.$message({
          type: 'error',
          message: '网络请求失败',
        })
      }
    })


    // 今天网站访问流量  - 接口很慢 不开放
    // this.getWebTodayAccessCount()


  }
};
</script>

<style lang="scss" scoped>
.big {
  margin: 100px 0 0 0;
  padding-top: 0;
  background-color: rgb(243, 243, 243);
  padding-top: 15px;
  .top {
    width: 100%;
    height: 360px;
    margin-top: 20px;
    overflow: hidden;
    .chart-container {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: #fff;
    }
  }
  .mid {
    width: 100%;
    height: 380px;
    .chart-wrapper {
      height: 340px;
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .bottom {
    width: 100%;
    height: 300px;
    // margin: 20px 0;
    .el-row {
      margin-right: 4px !important;
    }
    .chart-player {
      width: 100%;
      height: 270px;
      padding: 10px;
      background-color: #fff;
    }
  }
}
</style>
